<!-- 
  @name: 优惠券
  @date: 2020.3.19
 -->
<template>
	<view class="content">
		<!-- 选项卡 -->
		<view class="fixed_top">
			<view class="tab-blank"></view>
			<view class="tabview">
				<tab-card tab-width="700" line-width="80" :tab-list="tabList" @click-item="onClickItem"></tab-card>
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="list-card" :class="isUser ? 'h2' : ''" v-if="lists.length > 0">
			<view class="card" v-for="(item, index) in lists" :key="item.couponId">
				<view class="topview">
					<view class="left">
						<view class="title">
							<text v-if="item.couponOrderAmount2 == 0">{{item.couponAmount}}元无门槛优惠券</text>
							<text v-else>加注金额满{{item.couponOrderAmount}}元可使用</text>
						</view>
						<view class="preview" v-if="!isUser && item.couponStatus === 2">
							{{item.useBeginTime}}<text class="str">即将开始</text>
						</view>
					</view>
					<view class="right" :class="item.couponStatus === 3 || (isUser && item.couponStatus === 2) ? 'not' : ''">
						<text class="icon">￥</text>
						<text class="num">{{item.couponAmount}}</text>
					</view>
				</view>
				<view class="btmview">
					<view class="left">有效期{{item.useBeginTime}}至{{item.useEndTime}}</view>
					<view
						class="right"
						v-if="!isUser"
						:class="item.couponStatus === 3 ? 'not' : ''"
						@tap="$navigateTo('./details?couponId=' + item.couponId)">
						<text>规则详情</text>
						<view class="arr"></view>
					</view>
				</view>
				<view class="notimg" v-if="!isUser && item.couponStatus === 3"></view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		
		<!-- 暂无优惠券 -->
		<view class="no_lists" v-if="lists.length === 0">
			<view class="img"></view>
		</view>
		
		<!-- 添加优惠券 -->
		<view class="fixed_bottom" v-if="!isUser">
			<view class="_btn" @tap="showTip">添加优惠券</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',  //客户id
				isUser: false,  //是否是某个用户优惠券
				tabList: [],  //选项卡
				tabList1: ['待使用', '已使用', '已过期'],  //客户选项卡
				tabList2: ['全部', '进行中', '未开始', '已结束'],  //运营商选项卡
				tabIndex: 0,  //选项卡初始面板
				lists: [],  //列表
				list0: [],  //全部列表
				page0: 1,  //全部页码
				list1: [],  //进行中列表
				page1: 1,  //进行中页码
				list2: [],  //未开始列表
				page2: 1,  //未开始页码
				list3: [],  //已结束列表
				page3: 1,  //已结束页码
			}
		},
		watch: {
			list0(newVal, oldVal) {
				if(this.tabIndex === 0 && newVal !== this.lists) {
					this.lists = this.list0;
				}
			},
			list1(newVal, oldVal) {
				if(this.tabIndex === 1 && newVal !== this.lists) {
					this.lists = this.list1;
				}
			},
			list2(newVal, oldVal) {
				if(this.tabIndex === 2 && newVal !== this.lists) {
					this.lists = this.list2;
				}
			},
			list3(newVal, oldVal) {
				if(this.tabIndex === 3 && newVal !== this.lists) {
					this.lists = this.list3;
				}
			}
		},
		onLoad(e) {
			this.isUser = e.userId ? true : false;
			this.userId = this.isUser ? e.userId : '';
			this.tabList = this.isUser ? this.tabList1 : this.tabList2;
			this.getList(0);  //初始tabIndex为0，获取未使用
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.pullDown();
				this.$store.commit('hasLogin');
			}
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList(this.tabIndex);
		},
		onPullDownRefresh() {
			this.pullDown();
		},
		methods: {
			showTip() {
				uni.showModal({
					title:'提示',
					content:'请在运营商pc端管理系统中添加优惠券',
					showCancel:false
				})
			},
			//下拉刷新
			pullDown() {
				switch(this.tabIndex) {
					case 0: this.list0 = []; this.page0 = 1; break;
					case 1: this.list1 = []; this.page1 = 1; break;
					case 2: this.list2 = []; this.page2 = 1; break;
					case 3: this.list3 = []; this.page3 = 1; break;
				}
				this.getList(this.tabIndex);
			},
			//点击选项卡
			onClickItem(index) {
				if(this.tabIndex !== index) {
					this.tabIndex = index;
					switch(index) {
						case 0: this.lists = this.list0; break;
						case 1: this.lists = this.list1; break;
						case 2: this.lists = this.list2; break;
						case 3: this.lists = this.list3; break;
					}
					if((index === 1 && this.page1 === 1) || (index === 2 && this.page2 === 1) ||
					   (index === 3 && this.page3 === 1)) {
						this.getList(this.tabIndex);
					}
					uni.pageScrollTo({ scrollTop: 0, duration: 200 });
				}
			},
			//获取列表
			getList(status) {
				let page = 1;
				switch(status) {
					case 0: page = this.page0; break;
					case 1: page = this.page1; break;
					case 2: page = this.page2; break;
					case 3: page = this.page3; break;
				}
				let data = {
					page: page,
					rows: this.$tmp.ROWS_RET
				};
				if(this.isUser) {
					data.couponStatus = status;
					data.userId = this.userId;
				} else {
					data.couponType = status > 0 ? status : '';
				}
				let api = this.isUser
						  ? 'getusercouponpagebyoperator'
						  : 'getoperatorcouponpage';
				this.$http({
					url: this.$api.couponUrl + api,
					data: data,
					loading: page > 1 ? 0 : ''
				}).then(res => {
					let arr = this.isUser ? res.lstCoupon : res;
					if(arr && arr.length > 0) {
						arr.forEach(item => {
							item.couponOrderAmount2 = parseFloat(item.couponOrderAmount);
						});
						switch(status) {
							case 0: this.list0 = this.list0.concat(arr); this.page0 += 1; break;
							case 1: this.list1 = this.list1.concat(arr); this.page1 += 1; break;
							case 2: this.list2 = this.list2.concat(arr); this.page2 += 1; break;
							case 3: this.list3 = this.list3.concat(arr); this.page3 += 1; break;
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 选项卡 */
	.tab-blank {
		width: 750rpx;
		height: 26rpx;
		background-color: $color-primary;
	}
	.tabview {
		margin-top: -24rpx;
		padding-left: 25rpx;
		border-radius: 24rpx 24rpx 0 0;
		background-color: $color-white;
	}
	
	/* 列表 */
	.list-card.h2 {
		margin-bottom: 15rpx;
	}
	.list-card {
		width: 750rpx;
		margin-top: $tab-card-heg;
		margin-bottom: $fixed-bottom-heg + 15rpx;
		.card {
			position: relative;
			width: 690rpx;
			margin-top: $spacing-col;
			margin-left: 30rpx;
			padding-top: 40rpx;
			padding-bottom: 25rpx;
			box-shadow: $box-shadow;
			background-color: $color-white;
			border-radius: $border-radius-bm;
			.topview,
			.btmview {
				width: 100%;
				display: flex;
				flex-direction: row;
				.left {
					width: 420rpx;
				}
				.right {
					flex: 1;
					color: $color-primary;
					display: flex;
					flex-direction: row;
					justify-content: center;
				}
				.right.not {
					color: $color-grey;
				}
			}
			.topview {
				height: 110rpx;
				.left {
					margin-left: 15rpx;
					padding-left: 26rpx;
					border-bottom: 1rpx solid $color-list;
					.title {
						font-size: 30rpx;
					}
					.preview {
						margin-top: 20rpx;
						font-size: 20rpx;
						color: $color-grey;
						font-family: $font-family-num;
						.str {
							color: #FCAB04;
							margin-left: 8rpx;
						}
					}
				}
				.right {
					align-items: flex-end;
					padding-bottom: 10rpx;
					.icon {
						font-size: 24rpx;
						font-weight: 500;
						padding-bottom: 9rpx;
					}
					.num {
						font-size: 50rpx;
						font-family: $font-family-num;
					}
				}
			}
			.btmview {
				margin-top: 20rpx;
				align-items: center;
				.left {
					padding-left: 40rpx;
					font-size: 20rpx;
					color: $color-grey;
				}
				.right {
					font-size: 22rpx;
					padding-left: 20rpx;
					align-items: center;
					.arr {
						width: 10rpx;
						height: 19rpx;
						margin-top: 2rpx;
						margin-left: 10rpx;
						background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16VOa2AU7GZAAALl_DC9Pk220.png');
					}
					
				}
				.right.not {
					.arr {
						background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16VOk6AAlNbAAALeqW0NzI595.png');
					}
				}
			}
		}
		.notimg {
			position: absolute;
			top: 46rpx;
			left: 350rpx;
			width: 140rpx;
			height: 140rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15pqx-AVHUZAABUq78hxaE730.png');
		}
	}
	
	/* 暂无优惠券 */
	.no_lists .img {
		width: 448rpx;
		height: 358rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15prgSAJ8PdAAEr0Mtj_rc750.png');
	}
	
</style>
